<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>联系我们</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>

        <el-row :gutter="20">
           <el-col :span="5">
              
            <img v-bind:src= "nowcontact.img" alt="缩略图" width=200px height=200px>
          </el-col>
<el-col :span="4">

        <el-upload
          class="avatar-uploader"
          action="string"
          :http-request="UploadImage"
          :auto-upload="true"
          name="file"
          :headers="header"
          :show-file-list="false"
          list-type="picture"
          :multiple="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="beforeUpload">
          <el-button type="primary"  icon="el-icon-upload el-icon--right"
            >上传照片</el-button>
            
         </el-upload>


      </el-col>
         
        </el-row>
      <el-divider></el-divider>

      <el-row :gutter="20">
          <el-col :span="2">
            <label for="company">公司名称:</label>
          </el-col>
          <el-col :span="7">
        <el-input v-model="nowcontact.company" >
          </el-input>
          </el-col>

      </el-row>

       <el-row :gutter="20">
           <el-col :span="2">
            <label for="address">公司地址:</label>
            </el-col>
            <el-col :span="7">
                <el-input v-model="nowcontact.address" >
            </el-input>
            </el-col>
       </el-row>

      <el-row :gutter="20">
           <el-col :span="2">
        <label for="phone">联系电话:</label>
        </el-col>
            <el-col :span="7">
        <el-input v-model="nowcontact.phone" >
          </el-input>

      </el-col>
       </el-row>

       <el-row :gutter="20">
           <el-col :span="2">
        <label for="mailbox">联系邮箱:</label>
        </el-col>
            <el-col :span="7">
        <el-input v-model="nowcontact.mailbox" >
          </el-input>
      </el-col>
       </el-row>

    <el-row :gutter="20">
           <el-col :span="2">
            <label for="url">网址:</label>
            </el-col>
            <el-col :span="7">
                <el-input v-model="nowcontact.url" >
            </el-input>
            </el-col>
       </el-row>

<el-divider></el-divider>

<el-row type="flex" justify="end">
      <el-button type="primary" @click="updatecontact()" icon="el-icon-edit"
            >确定修改</el-button>
</el-row>
    </el-card>

  </div>
</template>

<script>

export default {
  data () {
    return {

      nowcontact: {},
      id:0,

      contactList: [],
      total: 0,

    }
  },
  created () {
    // 加载页面时 加载一次数据
    this.getcontact ()
  },
  methods: {
  
    //
    async getcontact () {
      var { data: res } = await this.$http.get('app/contact/')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.nowcontact = res.data
    },

    async updatecontact () {
      const { data: res } = await this.$http.post(
        'app/contact',
        { 'company': this.nowcontact.company, 
        'address': this.nowcontact.address,
        'phone': this.nowcontact.phone,
        'mailbox': this.nowcontact.mailbox,
        'url': this.nowcontact.url,
        'img': this.nowcontact.img
        }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.showDialogVisible = false

      // this.nowcontact = res.data
      // console.log(res.data.records)
    },


//:http-request 使用该指令， :on-success, :on-error 指令是不会触发的
      async UploadImage(param){
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('kind', 0)
      formData.append('account', "admin")
      formData.append('type', 2)
      const { data: res } = await this.$http.post(
        'minio/upload',
        formData
      )
        if (res.code == 200) {
          console.log(res.data)

            this.id = res.data

            var { data: result } = await this.$http.get('minio/'+this.id)
            if (result.code !== 200) return this.$message.error('Error:' + result.message)

            this.nowcontact.img = result.data
        } else {
          this.$message.error("图片插入失败");
        }
    },
      beforeUpload() {
        // 显示loading动画
       
      },
      uploadSuccess(res, file) {
        
      },
      // 富文本图片上传失败
      uploadError() {
       
      },


  },
  filters: {

  }
}
</script>

<style lang="less" scope>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
